import React, { Component } from 'react'
import { Outlet, NavLink, Routes, Route, useNavigate } from 'react-router-dom'
import News from "./secd/news";
import Video from "./secd/video";
import PropsRoute from "./secd/news2";
class List extends Component {

    // tip = (event) => {
    //     const un = useNavigate()
    //     event.preventDefault();        
    //     un('/list/video/66')

    // }

    render() {
        return (
            <div className="col-md-8">
                <ul>
                    <li > <NavLink to='/list/news/33' onClick={this.tip} className={({ isActive }) => isActive ? "red" : ""}   >News restfull 风格</NavLink> </li>
                    <li > <NavLink to='/list/news?id=2' onClick={this.tip} className={({ isActive }) => isActive ? "red" : ""}   >News,传递参数</NavLink> </li>
                    <li > <NavLink to='/list/video/66' className={({ isActive }) => isActive ? "red" : ""}   >Video</NavLink> </li>

                    {/* <li> <a href="#" onClick={this.tip}> Video restfull 风格</a> </li> */}

                </ul>

                <Routes>
                    <Route path='/news/:id' element={<News />}></Route>
                    {/* <Route path=':id' element={<News />}> </Route> */}
                    <Route path="/news/:id/" element={<PropsRoute>params</PropsRoute>}></Route>
                    <Route path="/news" element={<PropsRoute>search</PropsRoute>}></Route>

                    <Route path='video/:id' element={<Video />} />
                </Routes>
                <Outlet ></Outlet>
            </div>
        )
    }
}
export default List